<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>使用不同的浏览器模型</title>
    <style>
        .underline {
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p>This is a paragraph 1.</p>
<p>This is a paragraph 2.</p>
<p>This is a paragraph 3.</p>
<script>
    var evt = {
        addListener: function (obj, type, fn) {
            if (obj.addEventListener) {
                obj.addEventListener(type, fn);
            } else {
                obj.attachEvent('on' + type, fn);
            }
        },

        removeListener: function (obj, type, fn) {
            if (obj.removeEventListener) {
                obj.removeEventListener(type, fn);
            } else {
                obj.detachEvent('on' + type, fn);
            }
        },

        getTarget: function (e) {
            if (e.target) {
                return e.target;
            }
            return e.srcElement;
        },

        preventDefault: function (e) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    };

    function handleEvent(e) {
        var target = evt.getTarget(e);
        var type = e.type;

        if (target.tagName == 'P') {
            if (type == 'mouseover') {
                target.className = 'underline';
            } else if (type == 'mouseout') {
                target.className = '';
            }
        }

        if (type == 'click') {
            alert('You clicked the mouse button at the X: ' + e.clientX + ' and Y: ' + e.clientY + ' coordinates');
        }
    }

    evt.addListener(document, 'mouseover', handleEvent);
    evt.addListener(document, 'mouseout', handleEvent);
    evt.addListener(document, 'click', handleEvent);
</script>
</body>
</html>